<template>
	<view>
		<view class="avatar-info2">
			<view class="avtar-left">
				<image v-if="mineUserInfo.portrait" class="avatar" mode="aspectFill"
					:src="mineUserInfo.portrait!==''?mineUserInfo.portrait:'https://img0.baidu.com/it/u=4142899193,1027177229&fm=253&fmt=auto&app=120&f=JPEG?w=650&h=475'">
				</image>
				<view v-else class="avtar-img">
					<view v-if="mineUserInfo.realName">{{mineUserInfo.realName.slice(0,1)}}</view>
				</view>
			</view>

			<view class="right" @click="uploadPicture">
				<view>更换头像</view>
				<view class="iconfont icon-app-arrow-right"></view>
			</view>
		</view>
		<view class="info-txt">
			<view class="left">姓名</view>
			<view class="right">
				<view class="rt-name">{{mineUserInfo.realName}}</view>
			</view>
		</view>
		<view class="info-txt" v-for="(item,index) in list" :key="index" @click="selectChange(item)" v-if="item.isShow">
			<view class="left" >{{item.label}}</view>
			<view class="right">
				<view class="rt-name">{{item.value}}</view>
				<view class="iconfont icon-app-arrow-right"></view>
			</view>
		</view>
		<u-gap height="6" bgColor="#F5F5F5"></u-gap>
		<view>
			<view class="info-txt" v-for="(item,index) in list2" :key="index">
				<view class="left">{{item.label}}</view>
				<view class="right">
					<view class="rt-name">{{item.value}}</view>
					<view class="iconfont icon-app-arrow-right" v-if="item.isShow"></view>
				</view>
			</view>
		</view>
		<u-popup :show="showSex" mode="bottom" :round="10" @close="close" @open="open">
			<view class="sex-select">
				<view class="sex-item" @click="updateSex(1)">男</view>
				<view class="sex-item" @click="updateSex(2)">女</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import config from '@/common/config';
	export default {
		data() {
			return {
				list: [{
						id: 2,
						label: "账号",
						value: "13546963564",
						isShow: true
					},
					{
						id: 3,
						label: "手机号",
						value: "13546963564",
						isShow: true
					},
					{
						id: 4,
						label: "性别",
						value: "",
						isShow: true
					},
				],
				list2: [{
						label: "角色类型",
						value: "",
						isShow: false
					},
					{
						label: "职位",
						value: "",
						isShow: false
					}, {
						label: "部门机构",
						value: "",
						isShow: false
					}
				],
				mineUserInfo: {},
				showSex: false,
				userPortrait: null,
				environment:''
			}
		},
		onShow() {
			
			this.getuserInfo()
		},
		onLoad(options){
			console.log(options)
			if(options){
				this.environment = options.environment
			}
		},
		methods: {
			getuserInfo() {
				uni.$u.http.get(`/base/mobile/userInfo/getLoginUserInfo`).then(res => {
					if (res.code == 0) {
						this.mineUserInfo = res.data
						this.list[0].value = this.mineUserInfo.userAccount;
						// this.list[1].value = this.mineUserInfo.userAccount;
						//企业微信
						if (this.environment == 'wxwork') {
							this.list[0].isShow = false;
							this.list[1].value = this.mineUserInfo.userTel ? this.mineUserInfo.userTel : '';
							this.mineUserInfo.userTel = this.mineUserInfo.userTel ? this.mineUserInfo.userTel : ""
						} else {
							this.list[1].isShow = false;
							this.list[1].value = this.mineUserInfo.userTel ? this.mineUserInfo.userTel : this
								.mineUserInfo.userAccount;
							this.mineUserInfo.userTel = this.mineUserInfo.userTel ? this.mineUserInfo.userTel :
								this.mineUserInfo.userAccount
						}
						if (this.mineUserInfo.sex == 1) {
							this.list[2].value = "男"
						}
						if (this.mineUserInfo.sex == 2) {
							this.list[2].value = "女"
						}
						this.list2[0].value = this.mineUserInfo.roleName;
						this.list2[1].value = this.mineUserInfo.positionName;
						this.list2[2].value = this.mineUserInfo.deptName;
					}
				}).catch(err => {})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.showSex = false
				// console.log('close');
			},
			selectChange(item) {
				// //修改密码
				// if (item.isShow && item.id == 3) {
				// 	uni.navigateTo({
				// 		url: '/pages/subPackagesD/mycenter/changepwd'
				// 	})
				// }
				//更改姓名
				// if (item.isShow && item.id == 1) {
				// 	uni.navigateTo({
				// 		url: '/pages/subPackagesD/mycenter/editname?currentphone=' + this.mineUserInfo.realName
				// 	})
				// }

				//更改账号
				if (item.isShow && item.id == 2) {
					uni.navigateTo({
						url: '/pages/subPackagesD/mycenter/alterphone?currentphone=' + this.mineUserInfo
							.userAccount
					})
				}
				//更改手机号
				if (item.isShow && item.id == 3) {
					uni.navigateTo({
						url: '/pages/subPackagesD/mycenter/editphone?currentphone=' + this.mineUserInfo.userTel
					})
				}
				//修改性别
				if (item.isShow && item.id == 4) {
					this.showSex = true
				}
			},
			updateSex(type) {
				let params = {
					sex: type,
				}
				uni.$u.http.post(`/base/mobile/userInfo/updatePortraitOrSex`, params).then(res => {
					this.close();
					this.getuserInfo();
					if (res.code == 0) {
						uni.showToast({
							icon: 'none',
							title: '修改成功！'
						})
					}
				}).catch(err => {})
			},
			uploadPicture() {
				let _this = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"], //从相册选择或者打开相机
					success: function(res) {
						console.log('返回图片===>', res)
						if (res.tempFiles[0].size > 2 * 1024 * 1024) {
							_this.$refs.uToast.show({
								type: "error",
								message: "图片大小不得超过2MB"
							});
						} else {
							uni.uploadFile({
								url: config.baseUrl + '/base/upload/uploadFile', //仅为示例，非真实的接口地址
								filePath: res.tempFilePaths[0],
								name: 'file', //这里注意修改成后端需要的字段
								formData: {
									type: 1,
									file: res.tempFilePaths[0]
								},
								// header:{
								// 	// // #ifdef MP
								// 	// "Content-Type": "multipart/form-data",
								// 	// // #endif
								// 	[API-User-Token]: uni.getStorageSync('userInfo').token,
								// },
								header: {
									// #ifdef MP
									"Content-Type": "multipart/form-data",
									// #endif
									"API-User-Token": uni.getStorageSync('userInfo').token
								},
								success: (uploadFileRes) => {
									console.log(JSON.parse(uploadFileRes.data), "93")
									let res = JSON.parse(uploadFileRes.data);
									_this.userPortrait = res.data.fileIds[0];
									console.log('上传==>', res, _this.userPortrait);
									let params = {
										portrait: _this.userPortrait,
									}
									uni.$u.http.post(`/base/mobile/userInfo/updatePortraitOrSex`,
										params).then(res => {
										if (res.code == 0) {
											_this.getuserInfo();
											setTimeout(() => {
												uni.showToast({
													icon: 'none',
													title: '修改成功！'
												})
											}, 500)

										}

									}).catch(err => {})
								},
								fail: (e) => {
									console.log("网络请求fail");
								},
								complete: () => {
									//返回成功后调用后端返回的照片接口刷新头像
									console.log("网络请求complete");
									uni.hideLoading();
									_this.getuserInfo();

								}

							});
						}
					}
				});
			},
			previewImg(photoImg) {
				let imgsArray = [];
				imgsArray[0] = photoImg;
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			}
		}
	}
</script>

<style lang="scss">
	page {

		background: #ffffff;

	}

	.avatar-info2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #f5f5f5;
		background: #ffffff;

		.avtar-left {
			display: flex;
			align-items: center;
			justify-content: center;
			background: #fff;
			border-radius: 8rpx;

			.avtar-img {
				width: 150rpx;
				height: 150rpx;
				background: #4FA1FF;
				line-height: 150rpx;
				text-align: center;
				color: #fff;
				font-size: 80rpx;
				border-radius: 10rpx;
				border: 2px solid rgba(255, 255, 255, 1);
			}

			.avatar {
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
				border: 2px solid rgba(255, 255, 255, 1);
				margin: 2rpx;
			}
		}

		.left {
			border-radius: 8rpx;
			width: 152rpx;
			height: 152rpx;

			image {
				width: 152rpx;
				height: 152rpx;
				border-radius: 8rpx;
			}
		}

		.right {
			width: 60%;
			height: 152rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-right: 10rpx;
			font-size: 34rpx;
			color: #8c8c8c;
		}
	}

	.info-txt {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx 32rpx;
		border-bottom: 1px solid #f5f5f5;
		background: #ffffff;

		.left {
			font-size: 34rpx;
			color: #8c8c8c;
			width: 200rpx;
		}

		.right {
			display: flex;
			align-items: center;
			font-size: 34rpx;
			color: #8c8c8c;
			width: 80%;
			justify-content: flex-end;

			.rt-name {
				color: #000000;
				word-wrap: break-word;
				word-break: break-all;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}

	.sex-select {
		.sex-item {
			word-break: break-all;
			word-wrap: break-word;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx;
			border-bottom: 1px solid #f5f5f5;
		}
	}
</style>
